<template>
  <div class="about-page">
    <div class="about-header">
      <h1>关于我们</h1>
      <p>了解更多关于这个项目的信息</p>
    </div>

    <div class="about-content">
      <a-row :gutter="[32, 32]">
        <a-col :xs="24" :lg="12">
          <h2>项目介绍</h2>
          <p>
            这是一个基于 Vue 3 + TypeScript + Ant Design Vue 的现代化前端项目。
            项目采用了最新的前端技术栈，提供了完整的开发环境和工具链。
          </p>
          <p>
            项目特点包括：
          </p>
          <ul>
            <li>响应式设计，支持多种设备</li>
            <li>TypeScript 类型安全</li>
            <li>组件化开发</li>
            <li>现代化的构建工具</li>
          </ul>
        </a-col>

        <a-col :xs="24" :lg="12">
          <h2>技术栈</h2>
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="前端框架">Vue 3</a-descriptions-item>
            <a-descriptions-item label="开发语言">TypeScript</a-descriptions-item>
            <a-descriptions-item label="UI 组件库">Ant Design Vue</a-descriptions-item>
            <a-descriptions-item label="路由管理">Vue Router</a-descriptions-item>
            <a-descriptions-item label="状态管理">Pinia</a-descriptions-item>
            <a-descriptions-item label="构建工具">Vite</a-descriptions-item>
            <a-descriptions-item label="代码规范">ESLint + Prettier</a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>

      <div class="contact-section">
        <h2>联系方式</h2>
        <p>
          如果您对这个项目有任何问题或建议，欢迎通过以下方式联系我们：
        </p>
        <a-space size="large">
          <a-button type="primary" href="https://gitee.com/liu-qingle/ai-code" target="_blank">
            访问项目仓库
          </a-button>
          <a-button>发送邮件</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about-page {
  padding: 40px 0;
}

.about-header {
  text-align: center;
  margin-bottom: 60px;
}

.about-header h1 {
  font-size: 36px;
  color: #1890ff;
  margin-bottom: 16px;
}

.about-header p {
  font-size: 18px;
  color: #666;
}

.about-content h2 {
  color: #1890ff;
  margin-bottom: 20px;
  font-size: 24px;
}

.about-content p {
  line-height: 1.8;
  margin-bottom: 16px;
  color: #333;
}

.about-content ul {
  margin-left: 20px;
  margin-bottom: 20px;
}

.about-content li {
  margin-bottom: 8px;
  color: #333;
}

.contact-section {
  margin-top: 60px;
  padding: 40px;
  background: #f9f9f9;
  border-radius: 12px;
  text-align: center;
}

.contact-section h2 {
  margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-header h1 {
    font-size: 28px;
  }

  .about-header p {
    font-size: 16px;
  }

  .about-content h2 {
    font-size: 20px;
  }

  .contact-section {
    padding: 24px;
  }
}
</style>
